{% extends 'bases/base.html' %}
{% load static %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'main' %}
<!--<script type="text/javascript" src={% static "js/handlers/voting_handler.js" %}></script>-->

{% block content %}
<style>
		.video {
			width: 100%;
			height: 100%;
		}
</style>

<div class="d-flex align-items-stretch">
    <div class="stream-container flex-fill">
        <div class="row top-padding">
            <div class="col-md-8 resize">
                <div class="row">
                    <div class="col-md-12">
                        <div id="stream-figure-overlay"></div>
                        <h4 id="stream-timer-overlay">5:12</h4>
                        <div class="stream-box">
                            <input type="hidden" id="user_room_id" value={{ stream_id }}>
                            <img class="play-btn" src="{% static 'Pictures/play.svg' %}">
                            <video id="video" autoplay width="100%" height="100%" poster="{% static 'Pictures/placeholder1.jpg' %}">
                            </video>
                        </div>
                    </div>
                    <div class="col-md-12" style="margin-top: 1em;">
                        <div class="row">
                            <div class="col-md-6 stream-title-resize">
                                <h2 id="stream_title">Stream title</h2>
                                <h5 class="secondary-text">Streamer alias: <b id="streamer_name" >UltimateDoge487</b></h5>
                                <button onclick="stream_preview_toggle()" type="button" class="btn btn-outline-light">Stream Preview</button>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-4 stream-viewers-resize">
                                        <h5 class="secondary-text">Viewers: <b id="view_count">80082</b></h5>
                                        <div style="display: contents;">
                                            <!--Отображение лайков-->
                                            <div class="progress">
                                                <div id="likebar" class="progress-bar bg-success" role="progressbar"
                                                     style="width:50px" aria-valuenow="30" aria-valuemin="0"
                                                     aria-valuemax="100"></div>
                                                <div id="dislikebar" class="progress-bar bg-danger" role="progressbar"
                                                     style="width:50px" aria-valuenow="30" aria-valuemin="0"
                                                     aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-8 dis-like-stream">
                                        <div style="display: contents;">
                                            <button id="like-stream"
                                                    class="flex-sm-fill btn btn-outline-success align-self-stretch"
                                                    style="margin: 0 10px">
                                                <img class="like-img inline-block center-align"
                                                     src="/static/thumb-green.svg">
                                                <br>
                                                <h4 class="inline-block center-align">Kek</h4>
                                            </button>
                                            <button id="dislike-stream"
                                                    class="flex-sm-fill btn btn-outline-danger align-self-stretch"
                                                    style="margin: 0 10px">
                                                <img class="dislike-img inline-block center-align"
                                                     src="/static/thumb-red.svg">
                                                <br>
                                                <h4 class="inline-block center-align">Cringe</h4>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="stream_preview" class="stream-box" style="display: none">
                            <video id="local-video" autoplay width="100%" height="100%" poster="{% static 'Pictures/placeholder1.jpg' %}"></video>
                        </div>
                        <div class="queue-slider">
                            <a class="queue-slider__arrow queue-slider__arrow_left">
                                <i class="fa fa-chevron-left" aria-hidden="true"></i>
                            </a>
                            <ul id="queue" class="queue-slider__ul">
                                <h2 id = "queue_info_title">Загрузка...</h2>
                            </ul>
                            <a class="queue-slider__arrow queue-slider__arrow_right">
                                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% block chat %}
            {% include 'chat/chat.html' %}
            {% endblock chat %}
			</div>
        <div class="card" style="margin-top:20px;background-color: #424556;">
            <div class="card-body">
                 <h5 class="card-title">Stream Description</h5>
                <p id="stream_description">some additional info</p>
            </div>
        </div>
    </div>
	</div>
{% endblock %}

{% block extra_js %}
	{% load static %}
    <script>
        console.log('script run');
        function stream_preview_toggle() {
            if (stream_preview.style.display == "none") {
                stream_preview.style.display = "block"
            } else {
                stream_preview.style.display = "none"
            }
        }
        $(document).ready(function() {
            let msg_box = document.querySelector('#chat-message-input')
            let emote_toggle = document.querySelector('#toggle-emote-list')

            emote_toggle.addEventListener("click", function(){
                if (msg_box.style.display == "none") {
                    msg_box.style.display = "block"
                } else {
                    msg_box.style.display = "none"
                }
            })

            //let emotes_list_elements = document.getElementsByClassName("chat-list-emote-container");
            //emotes_list_elements.forEach(el => el.addEventListener('click', event => {
            //    let emote_list_name = this.getAttribute("data-name");
            //     $('#chat-message-input').value =  $('#chat-message-input').value + " " + emote_list_name + " "
            //}));
        });
    </script>
	{% render_bundle 'main' 'js' %}
{% endblock %}
